<template>
  <div class="tabDiv">
    <el-table
      :data="tableList"
      border
      ref="multipleTable"
      tooltip-effect="dark">
      <el-table-column prop="createTime" key="1" label="数据采集时间" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.createTime | formatTimer }}
        </template>
      </el-table-column>
      <!--深部位移-->
      <el-table-column v-if="isShow==1" key="85" prop="depth" label="孔深(m)" min-width="50">
      </el-table-column>
      <el-table-column
        v-if="isShow==1"
        key="86"
        prop="maxValue"
        label="最大相对位移(mm)"
        min-width="100">
      </el-table-column>
      <!--GNSS-->
      <el-table-column v-if="isShow==2" key="87" label="变化值(mm)" header-align="center">
        <el-table-column
          header-align="center"
          prop="xDisplacement"
          label="北向标"
          min-width="80">
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="yDisplacement"
          label="东向标"
          min-width="80">
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="zDisplacement"
          label="天向标"
          min-width="80">
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="xyDisplacement"
          label="水平位移"
          min-width="80">
        </el-table-column>
      </el-table-column>
      <!--拉线位移-->
      <el-table-column v-if="isShow==3" key="88" prop="relativeValue" label="位移值" min-width="60">
      </el-table-column>
      <el-table-column v-if="isShow==3" key="89" prop="speed" label="变化速率(mm/h)" min-width="120">
      </el-table-column>
      <!--降雨-->
      <el-table-column v-if="isShow==4" key="90" prop="hourlyRainfall" label="过去1小时降雨量（mm）" min-width="80">
      </el-table-column>
      <el-table-column v-if="isShow==4" key="91" prop="dailyRainfall" label="过去24小时降雨量（mm）" min-width="110">
      </el-table-column>
      <!--水位-->
      <el-table-column v-if="isShow==5" key="92" prop="realValue" label="水柱高度(m)" min-width="90">
      </el-table-column>
      <!--水准-->
      <el-table-column v-for="(item,index) in tabsName" :key="index+1" :label="item" prop="dataList" min-width="100">
        <template v-if="isShow==7" slot-scope="scope">
          <span>{{scope.row.dataList[index+1].relativeValue}}</span>
        </template>
      </el-table-column>
      <!--倾角-->
      <el-table-column v-if="isShow==8" key="93" prop="compensateInAngle" label="相对倾角(°)"
                       min-width="100"></el-table-column>
      <el-table-column v-if="isShow==8" key="94" prop="inRealAngle" label="真实倾角(°)" min-width="100"></el-table-column>
      <el-table-column v-if="isShow==8" key="95" prop="azRealAngle" label="方位角(°)" min-width="100"></el-table-column>
      <!--全站仪-->
      <el-table-column v-if="isShow==15" key="96" prop="horizontal" label="累计水平位移" min-width="100">
      </el-table-column>
      <el-table-column v-if="isShow==15" key="97" prop="vertical" label="累计竖向位移" min-width="130">
      </el-table-column>
      <!--雷达流量-->
      <el-table-column v-if="isShow==18" key="98" prop="relativeValue" label="距离(m)" min-width="60">
      </el-table-column>
      <el-table-column v-if="isShow==18" key="99" prop="speed" label="流速(m/s)" min-width="120">
      </el-table-column>
    </el-table>
    <div class="tabPagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
        :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
        layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>

  </div>
</template>
<script>
  import Format from '@/utils/format'

  export default {
    data() {
      return {
        tableList: [],
        isShow: 0,
        tabsName: [],
        form: {
          page: 1,
          pageSize: 10,
          total: 0,
        },
        // 采集数据
        collectionList: [],
        selectionList: []
      };
    }, filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer))
      },
    },
    methods: {
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      handleCurrentChange(val) {
        this.form.page = val;
        this.dataList()

      },
      dataList() {
        this.tableList = this.collectionList.slice((this.form.page - 1) * this.form.pageSize, this.form.page * this.form.pageSize)
      },
      upDateTable(data, monitorType) {
        this.collectionList = data.recordList || []
        this.form.total = this.collectionList.length;
        if (monitorType == 7) {
          let sersorNames = data.paintList
          sersorNames.forEach((item) => {
            this.tabsName.push(item.sensorName)
          })
          this.tabsName.splice(0, 1)
        }
        this.dataList()
        this.selectionList = JSON.parse(JSON.stringify(this.tableList));
        this.isShow = monitorType
        console.log(this.isShow)
        if (this.$refs.multipleTable) {
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleAllSelection();
          });
        }
      }
    }
  }
</script>
<style scoped lang="less">
  .tabDiv {
    width: 96vw;
    height: 100vh;
    text-align: center;
    margin: auto;
    overflow-y: auto;

    /deep/ .el-table {
      height: 66vh;
      width: 90vw;
      text-align: center !important;
      overflow: auto;
      margin: auto;

    }

    /deep/ .el-pagination {

      /*background: red;*/
      overflow: auto;
      text-align: center;
      align-items: center;
      margin: 10px auto;

    }

    /deep/ .el-table::-webkit-scrollbar {
      width: 2px !important;
      height: 0px !important;
    }

    /deep/ .el-pagination::-webkit-scrollbar {
      width: 10px;
      height: 0px;

    }
  }


</style>
